<template>
  <div class="chart-content-wrapper">
    <TopFilter :title="reportName">
      <SingleCheck @singleCheck="singleCheck"></SingleCheck>
      <double-check-filter @confirmDoubleSelect="planAreaSelect" defaultText="统筹区" :filter="filter" type="planArea"></double-check-filter>
      <single-list-filter-without-cb :defaultText="'医疗类别'" :filter="filter" :type="'insuredType'" @confirmSingleSelect="confirmSingleSelect"></single-list-filter-without-cb>
    </TopFilter>
    <div id="myChart3" class="chart-type1"  style="height:70%"></div>
    <Summarize :showSummarizeText="conclusion"></Summarize>
  </div>
</template>

<script>
  import {getChartItem3} from '../../../api/api'
  import SingleListFilter from '../../last/filter/single-list-filter.vue'
  import DoubleCheckFilter from '../../last/filter/double-check-filter.vue'
  import TopFilter from '../../last/filter/top-filter1.vue'
  import SingleCheck from '../../last/filter/single-check'
  import Summarize from '../../last/summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox'
  export default {
    name: 'chart3',
    props:['isChange'],
    components:{
      SingleListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
      SingleCheck
    },
    data () {
      return {
        filter: JSON.parse(JSON.stringify(require('../../cnst/allInputs.json').data)),
        conclusion:'',
        areaCode:null,
        countAvgFlag: '1',
        medicalCategory: null,
        /*reportName:'2013年-2018年患者次/人均费用增长趋势分析'*/
        reportName:'2013年-2018'
      }
    },
    mounted(){
      /*this.drawLine();*/
      this.myChart = this.$echarts.init(document.getElementById('myChart3') ,null, {renderer: 'canvas'});
      this.myChart.showLoading();
      this.getData();
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    methods:{
      getData(){
        getChartItem3('report/cntExpGrowthTrendAnalysis',this.areaCode, this.medicalCategory, this.countAvgFlag).then(response=>{
          let json = response.data;
          if(response.code===0){
            this.myChart.hideLoading();
           /* this.reportName = json.reportName;*/
            this.drawLine(json)
          }
        })
      },
      singleCheck(type){
        //选择均次人次
        this.countAvgFlag = type;
        this.getData();
      },
      confirmSingleSelect(filter){
        //医疗类别选择
        this.medicalCategory = filter;
        this.getData();
      },
      planAreaSelect(filter){
        //统筹区选择
        this.areaCode = filter.join(',');
        this.getData();
      },
      drawLine(json){
        this.conclusion = json.reportConclusion;
        // 格式化负增长数据，为0时设为空
        json.negativeIncreaseQuotaList.map((item,index)=>{
          if(item==0){
            json.negativeIncreaseQuotaList[index]=''
          }
        })
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表

        this.myChart.setOption({
          title:{
            subtext: '单位 : 万元',
            left:'2%',
            top:'20%',
            x:'left',
            subtextStyle:{
              color:'#fff'
            }
          },
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              height: '20%',
              top:'6%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              height: '55%',
              top:'32%',
              tooltip: {
                show:false,

              }
            }
          ],
          legend: {
            top: '94%',
            left:'10%',
            icon:'rect',
            itemWidth: 30,
            itemHeight: 10,
            itemGap: 10,
            selectedMode: false,
            data:['医疗总费用','增长额(正)',{
              name:'增长额(负)',
            }],
            textStyle:{
              color:'#fff'
            }
          },
          tooltip: {
            /*trigger: 'axis',*/
          },
          xAxis: [{
            data: json.yearList,
            show:true,
            axisLine:{
              show:true,//显示x轴坐标线并设置为虚线
              lineStyle:{
                color:'#294363'
              }
            },
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示x轴坐标数值
            }
          }, {
            data: json.yearList,
            gridIndex: 1,
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            splitLine: {
              show: false
            },
            position:'right',
           /* minInterval:5,*/
            /*max:'dataMax',*/
            splitNumber:2,
            axisLine:{
              show:false,
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }, {
            splitLine: {
              show: true,
              lineStyle:{
                color:'#2a4565',
                type:'dashed'
              }
            },
            gridIndex: 1,
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          visualMap: [{
            show: true,
            dimension: 0,
            seriesIndex: 0,
            left: '60%',
            top: '94%',
            itemWidth:10,
            itemHeight:10,
            orient:"horizontal",
            textStyle:{
              color:'#fff'
            },
            pieces:[
              {
                lte: 4,
                color: '#129cff',
                symbol:'circle',
                label: '增长率（环比）',
              }, {
                gt: 4,
                lte: 5,
                symbol:'circle',
                color: '#67ffdb',
                label: '增长率（同比）'
              }
            ],
          }],
          series: [{
            type: 'line',
            showSymbol: true,
            data: json.yearlyGrowthRateList,
            symbolSize: 10,
            label:{
              show:true,
              position:'top',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '平均增长\n率{c}%',
              },
              symbol: 'none',//设置平均线的没样式
              data : [
                {
                  type : 'average',
                  name: '平均增长率',
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          }, {
            type: 'bar',
            showSymbol: false,
            name: '医疗总费用',
            stack:'总额',
            data: json.yearlyTotalCostList,
            color:'#ff6a93',
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:'增长额(正)',//此值与legend图例对应
            showSymbol: false,
            stack:'总额',
            color:'#ffd66a',
            data: json.positiveIncreaseQuotaList,
            label:{
              show:true,
              color:'#fff',
              position:'top',
              formatter:function(params){
                let val = ''
                let arr = json.yearlyTotalCostList;
                arr.map((item,index)=>{
                  if(params.dataIndex==index){
                    val = parseInt((arr[index]+params.value)*100)/100+'万元'
                  }
                })
                return val;
              }
            },
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          },{
            type: 'bar',
            name:'增长额(负)',
            showSymbol: false,
            stack:'总额',
            itemStyle:{
              borderType:'dashed',
              borderColor:'#67ffdb',
              color:'rgba(255,255,255,0.1)',
            },
            data: json.negativeIncreaseQuotaList,
            barWidth: '40%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
